<!DOCTYPE html>
<html lang="ko">
<head prefix="og: http://ogp.me/ns#">
  <meta charset="utf-8">
  <title>Themes | Hexo</title>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Canonical links -->
  <link rel="canonical" href="https://hexo.io/ko/docs/themes.html">
  <!-- Alternative links -->
  
    
      <link rel="alternative" hreflang="en" href="https://hexo.io/docs/themes.html">
    
      <link rel="alternative" hreflang="zh-tw" href="https://hexo.io/zh-tw/docs/themes.html">
    
      <link rel="alternative" hreflang="zh-cn" href="https://hexo.io/zh-cn/docs/themes.html">
    
      <link rel="alternative" hreflang="ru" href="https://hexo.io/ru/docs/themes.html">
    
      <link rel="alternative" hreflang="ko" href="https://hexo.io/ko/docs/themes.html">
    
  
  <!-- Icon -->
  <link rel="apple-touch-icon" sizes="57x57" href="/icon/apple-touch-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="114x114" href="/icon/apple-touch-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="72x72" href="/icon/apple-touch-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="144x144" href="/icon/apple-touch-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="60x60" href="/icon/apple-touch-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/icon/apple-touch-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="76x76" href="/icon/apple-touch-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/icon/apple-touch-icon-152x152.png">
  <link rel="icon" type="image/png" href="/icon/favicon-196x196.png" sizes="196x196">
  <link rel="icon" type="image/png" href="/icon/favicon-160x160.png" sizes="160x160">
  <link rel="icon" type="image/png" href="/icon/favicon-96x96.png" sizes="96x96">
  <link rel="icon" type="image/png" href="/icon/favicon-16x16.png" sizes="16x16">
  <link rel="icon" type="image/png" href="/icon/favicon-32x32.png" sizes="32x32">
  <meta name="msapplication-TileColor" content="#2f83cd">
  <meta name="msapplication-TileImage" content="/icon/mstile-144x144.png">
  <!-- CSS -->
  <!-- build:css build/css/navy.css -->
  <link rel="stylesheet" href="/css/navy.css">
  <!-- endbuild -->
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css">
  <!-- RSS -->
  <link rel="alternate" href="/atom.xml" title="Hexo">
  <!-- Open Graph -->
  <meta name="description" content="Hexo theme를 만드는 것은 쉽습니다. - 새로운 폴더를 생성하기만 하면 됩니다. 당신의 테마의 사용을 위해 _config.yml 파일의 theme` 설정을 수정하세요. 테마는 아래의 구조를 가져야 합니다. .├── _config.yml├── languages├── layout├── scripts└── source _config.yml테마의 환경설정">
<meta property="og:type" content="website">
<meta property="og:title" content="Themes">
<meta property="og:url" content="https://hexo.io/ko/docs/themes.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:description" content="Hexo theme를 만드는 것은 쉽습니다. - 새로운 폴더를 생성하기만 하면 됩니다. 당신의 테마의 사용을 위해 _config.yml 파일의 theme` 설정을 수정하세요. 테마는 아래의 구조를 가져야 합니다. .├── _config.yml├── languages├── layout├── scripts└── source _config.yml테마의 환경설정">
<meta property="og:locale" content="ko">
<meta property="og:updated_time" content="2017-12-06T21:52:16.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Themes">
<meta name="twitter:description" content="Hexo theme를 만드는 것은 쉽습니다. - 새로운 폴더를 생성하기만 하면 됩니다. 당신의 테마의 사용을 위해 _config.yml 파일의 theme` 설정을 수정하세요. 테마는 아래의 구조를 가져야 합니다. .├── _config.yml├── languages├── layout├── scripts└── source _config.yml테마의 환경설정">
<meta name="twitter:site" content="hexojs">
<meta property="fb:admins" content="100000247608790">
  <!-- Google Analytics -->
  
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-48498357-3', 'auto');
  ga('send', 'pageview');
</script>

</head>

<body>
  <div id="container">
    <header id="header" class="wrapper">
  <div id="header-inner" class="inner">
    <h1 id="logo-wrap">
      <a href="/ko/" id="logo">Hexo</a>
    </h1>
    <nav id="main-nav">
      <a href="/ko/docs/" class="main-nav-link">Docs</a><a href="/ko/api/" class="main-nav-link">API</a><a href="/news/" class="main-nav-link">News</a><a href="/plugins/" class="main-nav-link">Plugins</a><a href="/themes/" class="main-nav-link">Themes</a>
      <a href="https://github.com/hexojs/hexo" class="main-nav-link"><i class="fa fa-github-alt"></i></a>
      <div id="search-input-wrap">
        <div id="search-input-icon">
          <i class="fa fa-search"></i>
        </div>
        <input type="search" id="search-input" placeholder="Search...">
      </div>
    </nav>
    <div id="lang-select-wrap">
      <label id="lang-select-label"><i class="fa fa-globe"></i><span>한국어</span></label>
      <select id="lang-select" data-canonical="docs/themes.html">
        
          <option value="en">English</option>
        
          <option value="zh-tw">正體中文</option>
        
          <option value="zh-cn">简体中文</option>
        
          <option value="ru">Русский</option>
        
          <option value="ko" selected>한국어</option>
        
      </select>
    </div>
    <a id="mobile-nav-toggle">
      <span class="mobile-nav-toggle-bar"></span>
      <span class="mobile-nav-toggle-bar"></span>
      <span class="mobile-nav-toggle-bar"></span>
    </a>
  </div>
</header>

    <div id="content-wrap">
  <div id="content" class="wrapper">
    <div id="content-inner">
      <article class="article-container" itemscope itemtype="http://schema.org/Article">
        <div class="article-inner">
          <div class="article">
            <div class="inner">
              <header class="article-header">
                <h1 class="article-title" itemprop="name">Themes</h1>
                <a href="https://github.com/hexojs/site/edit/master/source/ko/docs/themes.md" class="article-edit-link" title="Improve this doc"><i class="fa fa-pencil"></i></a>
              </header>
              <div class="article-content" itemprop="articleBody">
                <p>Hexo theme를 만드는 것은 쉽습니다. - 새로운 폴더를 생성하기만 하면 됩니다. 당신의 테마의 사용을 위해 <code>_config.yml</code> 파일의 theme` 설정을 수정하세요. 테마는 아래의 구조를 가져야 합니다.</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">.</span><br><span class="line">├── _config.yml</span><br><span class="line">├── languages</span><br><span class="line">├── layout</span><br><span class="line">├── scripts</span><br><span class="line">└── source</span><br></pre></td></tr></table></figure>
<h3 id="config-yml" class="article-heading"><a href="#config-yml" class="headerlink" title="_config.yml"></a>_config.yml<a class="article-anchor" href="#config-yml" aria-hidden="true"></a></h3><p>테마의 환경설정 파일입니다. server를 재시작하지 않고도 이 파일을 수정할 수 있습니다.</p>
<h3 id="languages" class="article-heading"><a href="#languages" class="headerlink" title="languages"></a>languages<a class="article-anchor" href="#languages" aria-hidden="true"></a></h3><p>언어 폴더입니다. 더 자세한 정보는 <a href="internationalization.html">internationalization (i18n)</a>를 참조하세요.</p>
<h3 id="layout" class="article-heading"><a href="#layout" class="headerlink" title="layout"></a>layout<a class="article-anchor" href="#layout" aria-hidden="true"></a></h3><p>레이아웃 폴더입니다. 이 폴더는 당신의 웹 사이트를 어떻게 보여줄지 정의한 테마 템플릿 파일을 포함합니다. Hexo는 기본적으로 <a href="http://paularmstrong.github.com/swig/" target="_blank" rel="noopener">Swig</a> 템플릿 엔진을 준비해 두었습니다. 하지만 당신은 <a href="https://github.com/hexojs/hexo-renderer-ejs" target="_blank" rel="noopener">EJS</a>, <a href="https://github.com/hexojs/hexo-renderer-haml" target="_blank" rel="noopener">Haml</a>, <a href="https://github.com/hexojs/hexo-renderer-jade" target="_blank" rel="noopener">Jade</a> 등 엔진을 대체할 다른 플러그인을 쉽게 설치할 수 있습니다. Hexo는 템플릿의 파일 확장자를 기반으로 템플릿 엔진을 선택합니다.</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">layout.ejs   - uses EJS</span><br><span class="line">layout.swig  - uses Swig</span><br></pre></td></tr></table></figure>
<p><a href="templates.html">templates</a>에서 더 자세한 정보를 확인할 수 있습니다.</p>
<h3 id="scripts" class="article-heading"><a href="#scripts" class="headerlink" title="scripts"></a>scripts<a class="article-anchor" href="#scripts" aria-hidden="true"></a></h3><p>스크립트 폴더입니다. Hexo는 초기화 과정에서 이 폴더의 모든 JavaScript 파일을 자동으로 불러옵니다. <a href="plugins.html">plugins</a>에서 더 자세한 정보를 확인할 수 있습니다.</p>
<h3 id="source" class="article-heading"><a href="#source" class="headerlink" title="source"></a>source<a class="article-anchor" href="#source" aria-hidden="true"></a></h3><p>소스 폴더입니다. Asset 파일(CSS, JavaScript 등)을 이곳에 넣어두세요. Hexo는 숨겨진 파일 및 <code>_</code>(underscore)로 시작하는 파일과 폴더를 무시합니다.</p>
<p>Hexo는 모든 렌더링 가능한 파일들을 처리한 후 <code>public</code> 폴더에 저장합니다. 렌더링이 불가능한 파일들은 <code>public</code> 폴더로 직접 복사합니다.</p>
<h3 id="배포" class="article-heading"><a href="#배포" class="headerlink" title="배포"></a>배포<a class="article-anchor" href="#배포" aria-hidden="true"></a></h3><p>테마의 제작이 완료되면, <a href="/themes">테마 목록</a>에 배포할 수 있습니다. 이 동작을 수행하기 전에 정상 동작을 보증하기 위해 <a href="https://github.com/hexojs/hexo-theme-unit-test" target="_blank" rel="noopener">테마 유닛 테스트</a>를 수행하세요. 테마를 배포하는 단계들은 <a href="contributing.html#Updating_Documentation">문서의 갱신</a> 과정과 매우 유사합니다.</p>
<ol>
<li>Fork <a href="https://github.com/hexojs/site" target="_blank" rel="noopener">hexojs/site</a></li>
<li><p>저장소를 당신의 컴퓨터에 clone하고 의존 사항들을 설치합니다.</p>
 <figure class="highlight shell"><table><tr><td class="code"><pre><span class="line"><span class="meta">$</span><span class="bash"> git <span class="built_in">clone</span> https://github.com/&lt;username&gt;/site.git</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> <span class="built_in">cd</span> site</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> npm install</span></span><br></pre></td></tr></table></figure>
</li>
<li><p><code>source/_data/themes.yml</code>를 수정하고 테마를 추가하세요.</p>
 <figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">- name:</span> <span class="string">landscape</span></span><br><span class="line"><span class="attr">  description:</span> <span class="string">A</span> <span class="string">brand</span> <span class="string">new</span> <span class="string">default</span> <span class="string">theme</span> <span class="string">for</span> <span class="string">Hexo.</span></span><br><span class="line"><span class="attr">  link:</span> <span class="attr">https://github.com/hexojs/hexo-theme-landscape</span></span><br><span class="line"><span class="attr">  preview:</span> <span class="attr">http://hexo.io/hexo-theme-landscape</span></span><br><span class="line"><span class="attr">  tags:</span></span><br><span class="line"><span class="bullet">    -</span> <span class="string">official</span></span><br><span class="line"><span class="bullet">    -</span> <span class="string">responsive</span></span><br><span class="line"><span class="bullet">    -</span> <span class="string">widget</span></span><br><span class="line"><span class="bullet">    -</span> <span class="string">two_column</span></span><br><span class="line"><span class="bullet">    -</span> <span class="string">one_column</span></span><br></pre></td></tr></table></figure>
</li>
<li><p><code>source/themes/screenshots</code>에 스크린샷을 추가하세요. 스크린샷의 이름은 테마와 동일해야 하며 반드시 사이즈가 800*500 픽셀인 PNG 파일이어야 합니다.</p>
</li>
<li>Branch에 push하세요.</li>
<li>변경사항에 대한 설명을 포함하여 Pull request를 생성합니다.</li>
</ol>

              </div>
              <footer class="article-footer">
                <time class="article-footer-updated" datetime="2017-12-06T21:52:16.000Z" itemprop="dateModified">Last updated: 2017-12-06</time>
                <a href="permalinks.html" class="article-footer-prev" title="Permalinks"><i class="fa fa-chevron-left"></i><span>Prev</span></a><a href="templates.html" class="article-footer-next" title="Templates"><span>Next</span><i class="fa fa-chevron-right"></i></a>
              </footer>
              
<section id="comments">
  <div id="disqus_thread"></div>
</section>
<script>
  var disqus_shortname = 'hexojs';
  var disqus_url = 'https://hexo.io/ko/docs/themes.html';
  var disqus_title = "Themes";
  var disqus_config = function(){
    this.language = 'ko';
  };
  (function(){
    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    dsq.src = 'https://go.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  })();
</script>

            </div>
          </div>
          <aside id="article-toc" role="navigation">
            <div id="article-toc-inner">
              <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=hexoio" id="_carbonads_js"></script>
              <strong class="sidebar-title">Contents</strong>
              <ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#config-yml"><span class="toc-text"><a href="#config-yml" class="headerlink" title="_config.yml"></a>_config.yml</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#languages"><span class="toc-text"><a href="#languages" class="headerlink" title="languages"></a>languages</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#layout"><span class="toc-text"><a href="#layout" class="headerlink" title="layout"></a>layout</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#scripts"><span class="toc-text"><a href="#scripts" class="headerlink" title="scripts"></a>scripts</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#source"><span class="toc-text"><a href="#source" class="headerlink" title="source"></a>source</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#배포"><span class="toc-text"><a href="#&#xBC30;&#xD3EC;" class="headerlink" title="&#xBC30;&#xD3EC;"></a>&#xBC30;&#xD3EC;</span></a></li></ol>
              <a href="#" id="article-toc-top">Back to Top</a>
            </div>
          </aside>
        </div>
      </article>
      <aside id="sidebar" role="navigation">
  <div class="inner">
    <strong class="sidebar-title">Getting Started</strong><a href="index.html" class="sidebar-link">Overview</a><a href="setup.html" class="sidebar-link">Setup</a><a href="configuration.html" class="sidebar-link">Configuration</a><a href="commands.html" class="sidebar-link">Commands</a><a href="migration.html" class="sidebar-link">Migration</a><strong class="sidebar-title">Basic Usage</strong><a href="writing.html" class="sidebar-link">Writing</a><a href="front-matter.html" class="sidebar-link">Front-matter</a><a href="tag-plugins.html" class="sidebar-link">Tag Plugins</a><a href="asset-folders.html" class="sidebar-link">Asset Folders</a><a href="data-files.html" class="sidebar-link">Data Files</a><a href="server.html" class="sidebar-link">Server</a><a href="generating.html" class="sidebar-link">Generating</a><a href="deployment.html" class="sidebar-link">Deployment</a><strong class="sidebar-title">Customization</strong><a href="permalinks.html" class="sidebar-link">Permalinks</a><a href="themes.html" class="sidebar-link current">Themes</a><a href="templates.html" class="sidebar-link">Templates</a><a href="variables.html" class="sidebar-link">Variables</a><a href="helpers.html" class="sidebar-link">Helpers</a><a href="internationalization.html" class="sidebar-link">Internationalization (i18n)</a><a href="plugins.html" class="sidebar-link">Plugins</a><strong class="sidebar-title">Miscellaneous</strong><a href="troubleshooting.html" class="sidebar-link">Troubleshooting</a><a href="contributing.html" class="sidebar-link">Contributing</a>
  </div>
</aside>
    </div>
  </div>
</div>

    <footer id="footer" class="wrapper">
  <div class="inner">
    <div id="footer-copyright">
      &copy; 2017 <a href="https://github.com/hexojs/hexo/graphs/contributors" target="_blank">Hexo</a><br>
      Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/" target="_blank">CC BY 4.0</a>.
    </div>
    <div id="footer-links">
      <a href="https://twitter.com/hexojs" class="footer-link" target="_blank"><i class="fa fa-twitter"></i></a>
      <a href="https://github.com/hexojs/hexo" class="footer-link" target="_blank"><i class="fa fa-github-alt"></i></a>
    </div>
  </div>
</footer>

  </div>
  <div id="mobile-nav-dimmer"></div>
  <nav id="mobile-nav">
  <div id="mobile-nav-inner">
    <ul id="mobile-nav-list">
      <a href="/ko/docs/" class="mobile-nav-link">Docs</a><a href="/ko/api/" class="mobile-nav-link">API</a><a href="/news/" class="mobile-nav-link">News</a><a href="/plugins/" class="mobile-nav-link">Plugins</a><a href="/themes/" class="mobile-nav-link">Themes</a>
      <li class="mobile-nav-item">
        <a href="https://github.com/hexojs/hexo" class="mobile-nav-link" rel="external" target="_blank">GitHub</a>
      </li>
    </ul>
    
      <strong class="mobile-nav-title">Getting Started</strong><a href="index.html" class="mobile-nav-link">Overview</a><a href="setup.html" class="mobile-nav-link">Setup</a><a href="configuration.html" class="mobile-nav-link">Configuration</a><a href="commands.html" class="mobile-nav-link">Commands</a><a href="migration.html" class="mobile-nav-link">Migration</a><strong class="mobile-nav-title">Basic Usage</strong><a href="writing.html" class="mobile-nav-link">Writing</a><a href="front-matter.html" class="mobile-nav-link">Front-matter</a><a href="tag-plugins.html" class="mobile-nav-link">Tag Plugins</a><a href="asset-folders.html" class="mobile-nav-link">Asset Folders</a><a href="data-files.html" class="mobile-nav-link">Data Files</a><a href="server.html" class="mobile-nav-link">Server</a><a href="generating.html" class="mobile-nav-link">Generating</a><a href="deployment.html" class="mobile-nav-link">Deployment</a><strong class="mobile-nav-title">Customization</strong><a href="permalinks.html" class="mobile-nav-link">Permalinks</a><a href="themes.html" class="mobile-nav-link current">Themes</a><a href="templates.html" class="mobile-nav-link">Templates</a><a href="variables.html" class="mobile-nav-link">Variables</a><a href="helpers.html" class="mobile-nav-link">Helpers</a><a href="internationalization.html" class="mobile-nav-link">Internationalization (i18n)</a><a href="plugins.html" class="mobile-nav-link">Plugins</a><strong class="mobile-nav-title">Miscellaneous</strong><a href="troubleshooting.html" class="mobile-nav-link">Troubleshooting</a><a href="contributing.html" class="mobile-nav-link">Contributing</a>
    
  </div>
  <div id="mobile-lang-select-wrap">
    <span id="mobile-lang-select-label"><i class="fa fa-globe"></i><span>한국어</span></span>
    <select id="mobile-lang-select" data-canonical="docs/themes.html">
      
        <option value="en">English</option>
      
        <option value="zh-tw">正體中文</option>
      
        <option value="zh-cn">简体中文</option>
      
        <option value="ru">Русский</option>
      
        <option value="ko" selected>한국어</option>
      
    </select>
  </div>
</nav>
  <!-- Scripts -->
<!-- build:js build/js/main.js -->
<script src="/js/lang_select.js"></script>
<script src="/js/toc.js"></script>
<script src="/js/mobile_nav.js"></script>
<!-- endbuild -->

<!-- Algolia -->


</body>
</html>